<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九宫格 有圆角</title>
<style>
div.body{
width:100px;
height:100px;
background-color:blue;
border:1px;/*边框 */
margin:5px;/*外边距*/
border-radius:15px;
padding:5px;/*内变距*/
}	
div.main{
	width: 500px;
	height: auto;
}
ul{list-style: outside none none;}
li{ list-style: outside none none;}
li.hang{float: left;}
</style>

</head>
<body>
	<div class="body">这是一个有圆角方格</div>
<hr/>
<p>下面是九宫格</p>
<div class="main">
<ul>
	<li>
		<ul>
			<li class="hang">
				<div class="body">1</div>
			</li>
			<li class="hang">
				<div class="body">2</div>
			</li>
			<li class="hang">
				<div class="body">3</div>
			</li>
		</ul>
	</li>
	<li>
		<ul>
			<li class="hang">
				<div class="body">4</div>
			</li>
			<li class="hang">
				<div class="body">5</div>
			</li>
			<li class="hang">
				<div class="body">6</div>
			</li>
		</ul>
	</li>
	<li>
		<ul>
			<li class="hang">
				<div class="body">7</div>
			</li>
			<li class="hang">
				<div class="body">8</div>
			</li>
			<li class="hang">
				<div class="body">9</div>
			</li>
		</ul>
	</li>
</ul>
</div>
</body>
</html>